// 导入node中的path模块
const path = require("path")
// 导入生成预览页面的插件，得到一个构造函数
const HtmlWebpackPlugin = require("html-webpack-plugin")
// 创建插件的实例对象
const htmlPlugin = new HtmlWebpackPlugin({
    template:"./src/index.html",//指定要用到的模板文件
    filename:"index.html"//指定生成的文件名称，该文件存在于内存中，在目录中不显示
});
// 引入vue加载器插件
const VueLoaderPlugin = require("vue-loader/lib/plugin")

module.exports = {
  // 编译模式
  mode: "development", //development production
  entry: path.join(__dirname, "./src/index.js"),
  output: {
    path: path.join(__dirname, "./dist"), //输出文件的存放路径
    filename: "bundle.js", //输出文件的名称
  },
  plugins: [htmlPlugin], //plugins数组是webpack打包期间会用到的一些插件列表
  module: {
    rules: [
      // test表示匹配的文件类型，use表示对应要调用的loader
      // use数组中的指定的loader顺序是固定的
      // 多个loader的调用顺序是：从后往前进行调用
      { test: /\.css$/, use: ["style-loader", "css-loader", "postcss-loader"] },
      { test: /\.less$/, use: ["style-loader", "css-loader", "less-loader"] },
      { test: /\.scss$/, use: ["style-loader", "css-loader", "sass-loader"] },
      { test: /\.js$/, use: "babel-loader", exclude: /node_modules/ },
      {
        test: /\.jpg|png|gif|bmp|ttf|eot|svg|woff|woff2$/,
        use: "url-loader?limit=16920",
      },
      { test: /\.vue$/, loader: "vue-loader" },
    ],
    plugins: [
      // 插件
      new VueLoaderPlugin(),//请确保引入了此插件
    ],
  },
};